<template>
  <div class="bottoms">
    <div class="bottons-fu">
      <h3 class="bottons-h3">ling的个人博客</h3>
      <img class="bottons-img" src="../../assets/img/commonimg/bottom.png" alt />
      <ul class="bottons-ul">
        <li class="bottons-li">
          <a
            href="https://www.jd.com/?cu=true&utm_source=baidu-pinzhuan&utm_medium=cpc&utm_campaign=t_288551095_baidupinzhuan&utm_term=0f3d30c8dba7459bb52f2eb5eba8ac7d_0_e528e95975344770bf98f8fcb81aa393"
          >京东</a>
        </li>
        <li class="bottons-li">
          <a href="https://gitee.com/">gitee</a>
        </li>
        <li class="bottons-li">
          <a href="https://github.com/">github</a>
        </li>
        <li class="bottons-li">
          <a href="https://fanyi.baidu.com/?aldtype=16047#auto/zh">翻译</a>
        </li>
        <li class="bottons-li">
          <a href="https://www.bilibili.com/">哔哩哔哩</a>
        </li>
        <li class="bottons-li">
          <a href="https://www.baidu.com/">百度</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Bottoms'
}
</script>

<style>
.bottoms {
  background-color: #424341;
  height: 284px;
  overflow: hidden;
}
.bottons-fu {
  text-align: center;
  margin-top: 40px;
}
.bottons-h3 {
  font-size: 45px;
  color: #fff;
}
.bottons-img {
  width: 500px;
  height: 60px;
  margin: 25px 0;
  border-radius: 10px;
}
.bottons-ul {
  display: flex;
  width: 600px;
  height: 50px;
  margin: 0 auto;
  justify-content: space-between;
}
.bottons-li a {
  color: #fff;
  font-size: 18px;
}
.bottons-li a:hover {
  color: pink;
}
</style>